<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="@{/}">
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 加载Vue框架的库文件 -->
    <script src="js/vue.js"></script>
    <!-- 加载Axios框架的库文件 -->
    <script src="js/axios.js"></script>
    <!-- 加载jQuery的库文件 -->
    <script src="js/jquery-3.6.0.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 导入外部css文件 -->
    <link rel="stylesheet" href="css/navigation.css">
</head>
<body>
<!-- 最上方logo -->
<div id="app">
    <div id="top">
        <div id="logo">
            <p>
                <span>禧创OCP</span>
            </p>
            <p>
                <span>全渠道数字平台</span>
            </p>
        </div>
        <div id="exit">
            <!-- 下拉菜单 -->
            <el-dropdown>
                <span class="el-dropdown-link" style="color: white;">
                  <i class="el-icon-user-solid">admin</i>
                </span>
                <!-- 后续连数据库 -->
                <el-dropdown-menu trigger="click">
                  <el-dropdown-item>水热事业部</el-dropdown-item>
                  <el-dropdown-item>厨电事业部</el-dropdown-item>
                  <el-dropdown-item>热能事业部</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              &nbsp;
            <i class="el-icon-switch-button" style="color: white;"></i>
        </div>
    </div>
    <!-- 上方导航栏 -->
    <div id="nav">
        <!-- 相应页面链接 -->
    </div>
    <!-- 侧边导航栏 -->
    <div id="left">
              <el-menu
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#989494"
                text-color="white"
                >
                <el-submenu index="1">
                    <template slot="title">
                      <span>订单管理</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item index="1-1">提交订单</el-menu-item>
                      <el-menu-item index="1-2">待处理订单</el-menu-item>
                      <el-menu-item index="1-3">采购订单</el-menu-item>
                      <el-menu-item index="1-4">零售订单列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title">
                      <span>售后管理</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item index="2-1">申请退换货</el-menu-item>
                      <el-menu-item index="2-2">退换货订单列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="3">
                    <template slot="title">
                      <span>产品管理</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item index="3-1">产品信息查询</el-menu-item>
                      <el-menu-item index="3-2">库存信息管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="4">
                    <template slot="title">
                      <span>会员信息</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item index="4-1">会员信息</el-menu-item>
                      <el-menu-item index="4-2">修改密码</el-menu-item>
                      <el-menu-item index="4-3">账号信息</el-menu-item>
                      <el-menu-item index="4-4">子账号管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-submenu index="5">
                    <template slot="title">
                      <span>设置</span>
                    </template>
                    <el-menu-item-group>
                      <el-menu-item index="5-1">网店设置</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                </el-menu>
    </div>
</div>
</body>
<script type="module">
    let vm=new Vue({
        el:'#app',
        data(){
            return{

            };
        },
    });
</script>
</html>
